<template>
  <div>
    <a-card style="width: 100%">
      <!-- 利用插槽 制作表头 开始 -->
      <div slot="title">
        <span>文章列表</span>
        <a-button type="primary" :style="{ margin: '0 17px' }" @click="add"
          >增加文章</a-button
        >
      </div>
      <!-- 利用插槽 制作表头 结束 -->

      <!-- 列表 布局开始 -->
      <a-table
        :columns="columns"
        :data-source="artList"
        rowKey="id"
        :pagination="{
          total: this.total,
          current: this.current,
          pageSize: this.pageSize,
        }"
        @change="change"
      >
        <a slot="name" slot-scope="text">{{ text }}</a>
        <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
        <span slot="tags" slot-scope="tags">
          <a-tag
            v-for="tag in tags"
            :key="tag"
            :color="
              tag === 'loser'
                ? 'volcano'
                : tag.length > 5
                ? 'geekblue'
                : 'green'
            "
          >
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
        <span slot="action" slot-scope="text, record">
          <a>Invite 一 {{ record.name }}</a>
          <a-divider type="vertical" />
          <a>Delete</a>
          <a-divider type="vertical" />
          <a class="ant-dropdown-link"> More actions <a-icon type="down" /> </a>
        </span>
        <!-- 插槽使用 放入照片开始 -->
        <span slot="thumb" slot-scope="text, record">
          <img :src="record.thumb" />
        </span>
        <!-- 插槽使用 放入照片结束 -->

        <!-- 插槽使用 放入操作按钮开始 -->
        <div slot="operate" slot-scope="text, record">
          <a-button
            type="primary"
            size="small"
            :style="{ marginRight: '17px' }"
            @click="edit(record.id)"
          >
            编辑</a-button
          >
          <a-button type="danger" size="small" @click="del(record.id)"
            >删除</a-button
          >
        </div>
        <!-- 插槽使用 放入操作按钮结束 -->
      </a-table>
      <!-- 列表 布局结束 -->
    </a-card>
  </div>
</template>

<script>
import { fetchArtList, delArt } from '../../api'
// 默认的数据
const columns = [
  {
    title: '标题',
    dataIndex: 'title',
    key: 'title'
  },
  {
    title: '描述',
    dataIndex: 'desc',
    key: 'desc'
  },
  {
    title: '作者',
    dataIndex: 'author',
    key: 'author'
  },
  {
    title: '封面图片',
    dataIndex: 'thumb',
    key: 'thumb',
    scopedSlots: { customRender: 'thumb' }
  },
  {
    title: '阅读次数',
    key: 'readTimes',
    dataIndex: 'readTimes'
  },
  {
    title: '创建时间',
    key: 'createdTime',
    dataIndex: 'createdTime'
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'operate' },
    key: 'operate'
  }
]

export default {
  data () {
    return {
      columns,
      artList: [],
      total: 0, // 分页器中的数据
      current: 1, // 默认是 第一页的内容
      pageSize: 3 // 默认 一页内容有多少条
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 增加 按钮
    add () {
      this.$router.push('/admin/artadd')
    },
    // 编辑 按钮
    edit (id) {
      console.log(id)
      this.$router.push(`/admin/artEdit/${id}`)
    },
    // 删除 按钮
    del (id) {
      console.log(id)
      // alert('del')
      // 直接调用 删除的方法
      // delArt(id).then(res => {
      //   console.log(res, 'delArt')
      // })
      // 利用挂载到 原型上的 模态框
      this.$confirm({
        title: '确认删除吗?',
        onOk: () => {
          delArt(id).then((res) => {
            console.log(res, 'delArt')
            if (res.data.code === 200) {
              this.$message.success('删除成功', 1, () => {
                this.$router.go(0)
              })
            }
          })
        },
        onCancel () {}
      })
    },
    // 点击分页器切换分页的方法
    change (page, pageSize) {
      console.log(page.current, page.pageSize)
      this.current = page.current
      this.pageSize = page.pageSize
      this.getList()
    },

    getList () {
      // 获取文章列表 信息的方法
      fetchArtList().then((res) => {
        console.log(res, 'fetchArtList')
        if (res.data.code === 200) {
          this.artList = res.data.data.artList // 控制列表
          this.total = res.data.data.count
        }
      })
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
